<template>
  <div class="exception-create">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>异常管理</el-breadcrumb-item>
        <el-breadcrumb-item>录入异常</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="异常单号：">
          <el-input v-model="searchForm.exceptionNo"></el-input>
        </el-form-item>
        <el-form-item label="客户订单号：">
          <el-input v-model="searchForm.customerOrderNo"></el-input>
        </el-form-item>
        <el-form-item label="派车单号：">
          <el-input v-model="searchForm.dispatchNo"></el-input>
        </el-form-item>
        <el-form-item label="异常类型：">
          <el-select v-model="searchForm.type" placeholder="交通事故">
            <el-option label="交通事故" value="交通事故"></el-option>
            <el-option label="货物损坏" value="货物损坏"></el-option>
            <el-option label="运输延误" value="运输延误"></el-option>
            <el-option label="货物丢失" value="货物丢失"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 未处理异常单列表 -->
    <el-card class="table-card">
      <div class="section-title">未处理异常单列表</div>
      <div class="table-operations">
        <el-checkbox v-model="submitAll">提交</el-checkbox>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="exceptionNo" label="异常单号"></el-table-column>
        <el-table-column prop="customerOrderNo" label="客户订单号"></el-table-column>
        <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
        <el-table-column prop="reportTime" label="反馈时间"></el-table-column>
        <el-table-column prop="type" label="异常类型"></el-table-column>
        <el-table-column prop="status" label="处理进度"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleManage(scope.row)">管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <span class="pagination-info">当前第1/50页，每页15条，共500条记录</span>
        <div class="pagination-buttons">
          <el-button size="small">首页</el-button>
          <el-button size="small">上一页</el-button>
          <el-button size="small">下一页</el-button>
          <el-button size="small">尾页</el-button>
          <el-input size="small" v-model="currentPage" style="width: 50px"></el-input>
          <el-button type="primary" size="small">跳转</el-button>
        </div>
      </div>
    </el-card>

    <!-- 异常管理弹窗 -->
    <el-dialog title="异常管理" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
      <div class="exception-manage">
        <!-- 派车单信息 -->
        <div class="dispatch-info">
          <div class="section-title">派车单信息</div>
          <el-table :data="[currentRow.dispatchInfo]" border style="width: 100%">
            <el-table-column prop="exceptionNo" label="异常单号"></el-table-column>
            <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
            <el-table-column prop="customerOrderNo" label="客户订单号"></el-table-column>
            <el-table-column prop="route" label="路线"></el-table-column>
            <el-table-column prop="dispatchTime" label="指派时间"></el-table-column>
            <el-table-column prop="carrier" label="承运商"></el-table-column>
            <el-table-column prop="plateNo" label="车辆"></el-table-column>
            <el-table-column prop="driver" label="司机"></el-table-column>
            <el-table-column prop="receiptTime" label="回单时间"></el-table-column>
          </el-table>
        </div>

        <!-- 异常信息 -->
        <div class="exception-info">
          <div class="section-title">异常信息</div>
          <el-form :model="exceptionForm" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="当前节点">
                  <el-input v-model="exceptionForm.currentNode" placeholder="在途运输"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="异常类型">
                  <el-select v-model="exceptionForm.type" style="width: 100%">
                    <el-option label="交通事故" value="交通事故"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="反馈人">
                  <el-input v-model="exceptionForm.reporter" placeholder="张春雨"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发现时间">
                  <el-input v-model="exceptionForm.findTime" placeholder="2015-07-30 20:24:10"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="反馈方式">
                  <el-input v-model="exceptionForm.reportMethod" placeholder="电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="反馈时间">
                  <el-input v-model="exceptionForm.reportTime" placeholder="2015-07-30 20:24:10"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="异常说明">
              <el-input type="textarea" v-model="exceptionForm.description" :rows="3" 
                placeholder="发生车车事故，需要临时维修"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 附件 -->
        <div class="attachments">
          <div class="section-title">附件</div>
          <div class="image-list">
            <div class="image-item" v-for="(image, index) in exceptionForm.images" :key="index">
              <img :src="image.url" alt="异常图片">
              <div class="image-actions">
                <i class="el-icon-delete" title="删除"></i>
                <i class="el-icon-zoom-in" title="查看"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 异常处理 -->
        <div class="exception-handle">
          <div class="section-title">异常处理</div>
          <el-form :model="handleForm" label-width="120px">
            <el-form-item label="异常影响">
              <el-input type="textarea" v-model="handleForm.impact" :rows="3" 
                placeholder="无法在客户要求时间内送达，客户非常不满意"></el-input>
            </el-form-item>
            <el-form-item label="责任认定">
              <el-select v-model="handleForm.responsible" style="width: 200px">
                <el-option label="承运商" value="承运商"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事故原因">
              <el-input type="textarea" v-model="handleForm.reason" :rows="3" 
                placeholder="司机疲劳驾驶"></el-input>
            </el-form-item>
            <el-form-item label="处理方式">
              <el-input type="textarea" v-model="handleForm.solution" :rows="3" 
                placeholder="通知承运商更换司机，与客户商讨赔偿事宜，与承运商商讨赔偿事宜"></el-input>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="赔偿客户金额">
                  <el-input v-model="handleForm.customerCompensation" placeholder="8000.00"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="承运商承担金额">
                  <el-input v-model="handleForm.carrierCompensation" placeholder="8000.00"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button type="success" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExceptionCreate',
  data() {
    return {
      searchForm: {
        exceptionNo: '',
        customerOrderNo: '',
        dispatchNo: '',
        type: '交通事故'
      },
      submitAll: false,
      currentPage: 1,
      tableData: [{
        exceptionNo: '2018781',
        customerOrderNo: '8989009',
        dispatchNo: '6767666',
        reportTime: '2015-07-30 20:24:10',
        type: '交通事故',
        status: '未处理'
      },
      {
        exceptionNo: '2018781',
        customerOrderNo: '2018781',
        dispatchNo: '6767666',
        reportTime: '2015-07-30 20:24:10',
        type: '货物损坏',
        status: '处理中'
      }],
      dialogVisible: false,
      currentRow: {},
      exceptionForm: {
        currentNode: '',
        type: '',
        reporter: '',
        findTime: '',
        reportMethod: '',
        reportTime: '',
        description: '',
        images: []
      },
      handleForm: {
        impact: '',
        responsible: '',
        reason: '',
        solution: '',
        customerCompensation: '',
        carrierCompensation: ''
      }
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        exceptionNo: '',
        customerOrderNo: '',
        dispatchNo: '',
        type: '交通事故'
      }
    },
    handleManage(row) {
      this.currentRow = row
      this.dialogVisible = true
    },
    handleSave() {
      console.log('保存异常管理信息：', this.exceptionForm)
      console.log('保存异常处理信息：', this.handleForm)
    },
    handleConfirm() {
      console.log('确认异常处理')
    }
  }
}
</script>

<style scoped>
.exception-create {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-operations {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}
</style> 